<template>
  <div class="customer-page-container">
    <!-- 搜索表单区域 -->
    <div class="search-form">
      <el-form :inline="true" :model="pageObj.page.car" label-width="90px">
        <el-form-item label="车辆ID">
          <el-input v-model.number="pageObj.page.car.id" placeholder="输入车辆ID搜索" clearable />
        </el-form-item>
        <el-form-item label="车辆号牌">
          <el-input v-model="pageObj.page.car.vehicleNo" placeholder="输入车辆号牌搜索" clearable />
        </el-form-item>
        <el-form-item label="所有人">
          <el-input v-model="pageObj.page.car.ownerName" placeholder="输入车辆所有人搜索" clearable />
        </el-form-item>
        <el-form-item label="所在城市">
          <el-input v-model="pageObj.page.car.address" placeholder="输入所在城市搜索" clearable />
        </el-form-item>
        <el-form-item label="车辆状态">
          <el-select v-model="pageObj.page.car.state" placeholder="选择车辆状态" clearable>
            <el-option label="有效" value="0" />
            <el-option label="失效" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="findData(1)">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="pageObj.parmData" class="customer-table" @selection-change="handleSelectionChange" stripe border>
      <!-- 基础选择列和ID -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" prop="id" width="80" align="center" />

      <!-- 车辆基础信息 -->
      <el-table-column label="车辆号牌" prop="vehicleNo" width="120" align="center" />
      <el-table-column label="车牌颜色" prop="plateColor" width="100" align="center">
        <template #default="scope">
          <span>{{ formatPlateColor(scope.row.plateColor) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在城市" prop="address" width="120" align="center" />
      <el-table-column label="所有人" prop="ownerName" width="120" align="center" />
      <el-table-column label="厂牌型号" align="center">
        <template #default="scope">
          {{ scope.row.brand }} {{ scope.row.model }}
        </template>
      </el-table-column>
      <el-table-column label="核定载客位" prop="seats" width="100" align="center" />
      <el-table-column label="燃料类型" prop="fueType" width="100" align="center">
        <template #default="scope">
          <span>{{ formatFueType(scope.row.fueType) }}</span>
        </template>
      </el-table-column>

      <!-- 运营信息 -->
      <el-table-column label="服务类型" prop="commercialType" width="130" align="center">
        <template #default="scope">
          <span>{{ formatCommercialType(scope.row.commercialType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输区域" prop="transArea" width="150" align="center" show-overflow-tooltip />
      <el-table-column label="运输证有效期" align="center" width="180">
        <template #default="scope">
          <span>{{ scope.row.transDateStart }}至{{ scope.row.transDateEnd }}</span>
        </template>
      </el-table-column>

      <!-- 状态信息 -->
      <el-table-column label="车辆状态" prop="state" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
            {{ scope.row.state === 0 ? '有效' : '失效' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="检修状态" prop="fixState" width="100" align="center">
        <template #default="scope">
          <el-tag :type="getFixStateTagType(scope.row.fixState)">
            {{ formatFixState(scope.row.fixState) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下次年检" prop="nextFixDate" width="120" align="center" />

      <!-- 操作列 -->
      <el-table-column label="操作" align="center" width="80" fixed="right">
        <template #default="scope">
          <el-button size="small" :icon="View" circle type="info" title="查看详情"
            @click="handleView(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next, total" :total="pageObj.page.total"
        :page-size="pageObj.page.pageSize" :current-page="pageObj.page.pageNum" @current-change="findData" />
    </div>

    <!-- 详情对话框 -->
    <el-dialog v-model="pageObj.dialogObj.dialogFormVisible" draggable :title="pageObj.dialogObj.title" width="70%"
      class="customer-dialog">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="车辆ID">{{ pageObj.parm.id }}</el-descriptions-item>
            <el-descriptions-item label="车辆号牌">{{ pageObj.parm.vehicleNo }}</el-descriptions-item>
            <el-descriptions-item label="车牌颜色">{{ formatPlateColor(pageObj.parm.plateColor) }}</el-descriptions-item>
            <el-descriptions-item label="所在城市">{{ pageObj.parm.address }}</el-descriptions-item>
            <el-descriptions-item label="车辆所有人">{{ pageObj.parm.ownerName }}</el-descriptions-item>
            <el-descriptions-item label="厂牌型号">{{ pageObj.parm.brand }} {{ pageObj.parm.model }}</el-descriptions-item>
            <el-descriptions-item label="车辆类型">{{ pageObj.parm.vehicleType }}</el-descriptions-item>
            <el-descriptions-item label="核定载客位">{{ pageObj.parm.seats }}</el-descriptions-item>
            <el-descriptions-item label="车辆颜色">{{ formatVehicleColor(pageObj.parm.vehicleColor) }}</el-descriptions-item>
            <el-descriptions-item label="发动机号">{{ pageObj.parm.engineId }}</el-descriptions-item>
            <el-descriptions-item label="车辆识别号">{{ pageObj.parm.vin }}</el-descriptions-item>
            <el-descriptions-item label="发动机排量">{{ pageObj.parm.engineDisplace }}毫升</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="服务类型">{{ formatCommercialType(pageObj.parm.commercialType) }}</el-descriptions-item>
            <el-descriptions-item label="燃料类型">{{ formatFueType(pageObj.parm.fueType) }}</el-descriptions-item>
            <el-descriptions-item label="车辆状态">{{ pageObj.parm.state === 0 ? '有效' : '失效' }}</el-descriptions-item>
            <el-descriptions-item label="检修状态">{{ formatFixState(pageObj.parm.fixState) }}</el-descriptions-item>
            <el-descriptions-item label="年度审验状态">{{ formatCheckState(pageObj.parm.checkState) }}</el-descriptions-item>
            <el-descriptions-item label="注册日期">{{ pageObj.parm.certifyDateA }}</el-descriptions-item>
            <el-descriptions-item label="初次登记日期">{{ pageObj.parm.certifyDateB }}</el-descriptions-item>
            <el-descriptions-item label="下次年检时间">{{ pageObj.parm.nextFixDate }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ pageObj.parm.gmtCreate }}</el-descriptions-item>
            <el-descriptions-item label="修改时间">{{ pageObj.parm.gmtModified }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="left">运营许可信息</el-divider>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="运输证发证机构">{{ pageObj.parm.transAgency }}</el-descriptions-item>
            <el-descriptions-item label="运营区域">{{ pageObj.parm.transArea }}</el-descriptions-item>
            <el-descriptions-item label="运输证有效期">
              {{ pageObj.parm.transDateStart }}至{{ pageObj.parm.transDateEnd }}
            </el-descriptions-item>
            <el-descriptions-item label="报备日期">{{ pageObj.parm.registerDate }}</el-descriptions-item>
            <el-descriptions-item label="运价编码">{{ pageObj.parm.fareType }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="卫星定位品牌">{{ pageObj.parm.gpsBrand }}</el-descriptions-item>
            <el-descriptions-item label="卫星型号">{{ pageObj.parm.gpsModel }}</el-descriptions-item>
            <el-descriptions-item label="定位设备安装日期">{{ pageObj.parm.gpsInstallDate }}</el-descriptions-item>
            <el-descriptions-item label="终端ID">{{ pageObj.parm.tid }}</el-descriptions-item>
            <el-descriptions-item label="轨迹ID">{{ pageObj.parm.trid }}</el-descriptions-item>
            <el-descriptions-item label="轨迹名称">{{ pageObj.parm.trname }}</el-descriptions-item>
            <el-descriptions-item label="发票打印设备序列号">{{ pageObj.parm.feePrintId }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="pageObj.dialogObj.dialogFormVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { View } from '@element-plus/icons-vue';
import { carService } from '../stores/car.ts';

// 页面数据对象
const pageObj = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    // 搜索参数
    car: {
      id: null,
      vehicleNo: '',
      ownerName: '',
      address: '',
      state: ''
    }
  },
  parmData: [], // 表格数据列表
  parm: { // 表单数据，对应car表所有字段
    id: null,
    address: '',
    vehicleNo: '',
    plateColor: '',
    seats: null,
    brand: '',
    model: '',
    vehicleType: '',
    ownerName: '',
    vehicleColor: '',
    engineId: '',
    vin: '',
    certifyDateA: '',
    fueType: '',
    engineDisplace: '',
    transAgency: '',
    transArea: '',
    transDateStart: '',
    transDateEnd: '',
    certifyDateB: '',
    fixState: '',
    nextFixDate: '',
    checkState: '',
    feePrintId: '',
    gpsBrand: '',
    gpsModel: '',
    gpsInstallDate: '',
    registerDate: '',
    commercialType: null,
    fareType: '',
    state: null,
    tid: '',
    trid: '',
    trname: '',
    gmtCreate: '',
    gmtModified: ''
  },
  dialogObj: {
    dialogFormVisible: false,
    title: '车辆详情'
  }
});

// 选中的行数据
const multipleSelection = ref([]);

// 页面加载时查询数据
onMounted(() => {
  findData(1);
});

// 查询数据
const findData = async (pageNum) => {
  pageObj.page.pageNum = pageNum;
  const res = await carService.selectCar(pageObj.page)
  console.log("从后端拿到的车辆数据——————————", res);
  pageObj.parmData = res ;

};

// 重置搜索表单
const resetForm = () => {
  pageObj.page.car = {
    id: null,
    vehicleNo: '',
    ownerName: '',
    address: '',
    state: ''
  };
  findData(1);
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

// 查看详情
const handleView = (row) => {
  pageObj.parm = { ...row };
  pageObj.dialogObj.dialogFormVisible = true;
};

// 格式化车牌颜色
const formatPlateColor = (colorCode) => {
  const colorMap = {
    '1': '蓝色',
    '2': '黄色',
    '3': '黑色',
    '4': '白色',
    '5': '绿色',
    '9': '其他'
  };
  return colorMap[colorCode] || '未知';
};

// 格式化燃料类型
const formatFueType = (fuelCode) => {
  const fuelMap = {
    '1': '汽油',
    '2': '柴油',
    '3': '天然气',
    '4': '液化气',
    '5': '电动',
    '9': '其他'
  };
  return fuelMap[fuelCode] || '未知';
};

// 格式化服务类型
const formatCommercialType = (typeCode) => {
  const typeMap = {
    1: '网络预约出租车',
    2: '巡游出租车',
    3: '私人小客车合乘'
  };
  return typeMap[typeCode] || '未知';
};

// 格式化检修状态
const formatFixState = (stateCode) => {
  const stateMap = {
    '0': '未检修',
    '1': '已检修',
    '2': '未知'
  };
  return stateMap[stateCode] || '未知';
};

// 格式化年度审验状态
const formatCheckState = (stateCode) => {
  const stateMap = {
    '0': '未年审',
    '1': '年审合格',
    '2': '年审不合格'
  };
  return stateMap[stateCode] || '未知';
};

// 格式化车辆颜色
const formatVehicleColor = (colorCode) => {
  const colorMap = {
    '1': '白色',
    '2': '黑色'
  };
  return colorMap[colorCode] || '未知';
};

// 获取检修状态标签类型
const getFixStateTagType = (stateCode) => {
  const typeMap = {
    '0': 'warning',
    '1': 'success',
    '2': 'info'
  };
  return typeMap[stateCode] || 'info';
};
</script>

<style>
/* 复用订单页面的样式，保持风格一致 */
.customer-page-container {
  padding: 15px;
  background-color: rgba(45, 55, 72, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  color: #cdd6e8;
  min-height: calc(100vh - 77px - 40px);
}

.search-form {
  background-color: rgba(31, 41, 55, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 15px 15px 0 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.search-form .el-form-item__label {
  color: #d1d5db;
}

/* 续接搜索表单样式 */
.search-form .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  box-shadow: none !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.search-form .el-input__inner {
  color: #e5e7eb !important;
}

.search-form .el-input__inner::placeholder {
  color: #9ca3af;
}

.search-form .el-select .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.search-form .el-select .el-input__inner {
  color: #e5e7eb !important;
}

/* 下拉框样式 */
.el-select-dropdown {
  background-color: #2d3748 !important;
  border: 1px solid #4b5563 !important;
}

.el-select-dropdown__item {
  color: #e5e7eb !important;
}

.el-select-dropdown__item:hover {
  background-color: #4b5563 !important;
}

.el-select-dropdown__item.selected {
  background-color: #3b82f6 !important;
  color: white !important;
}

/* 搜索按钮样式 */
.search-form .el-button--primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.search-form .el-button--primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.search-form .el-button {
  background-color: #4b5563;
  border-color: #4b5563;
  color: #e5e7eb;
}

.search-form .el-button:hover {
  background-color: #6b7280;
  border-color: #6b7280;
  color: #ffffff;
}

/* 表格样式 */
.customer-table {
  background-color: rgba(31, 41, 55, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

/* 表头样式 */
.customer-table .el-table__header-wrapper th {
  background-color: rgba(55, 65, 81, 0.75) !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(75, 85, 99, 0.6) !important;
  padding: 10px 0 !important;
  vertical-align: middle;
  text-align: center;
}

/* 表格行样式 */
.customer-table .el-table__row {
  background-color: transparent !important;
  color: #cdd6e8 !important;
}

.customer-table .el-table__row:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
  color: #ffffff !important;
}

/* 斑马纹样式 */
.customer-table .el-table__row.el-table__row--striped {
  background-color: rgba(37, 48, 65, 0.3) !important;
}

.customer-table .el-table__row.el-table__row--striped:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
}

/* 表格单元格样式 */
.customer-table .el-table__cell {
  border-bottom: 1px solid rgba(75, 85, 99, 0.3) !important;
  padding: 10px 0 !important;
}

/* 标签样式 */
.el-tag {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}

/* 分页区域样式 */
.pagination-container {
  margin-top: 15px;
  text-align: right;
  padding: 10px;
}

.el-pagination {
  color: #d1d5db;
}

.el-pagination__sizes .el-input .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__sizes .el-input .el-input__inner {
  color: #e5e7eb !important;
}

.el-pagination button:disabled {
  background-color: rgba(55, 65, 81, 0.5) !important;
  color: #9ca3af !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

.el-pagination__prev,
.el-pagination__next,
.el-pagination__jump-prev,
.el-pagination__jump-next {
  background-color: rgba(55, 65, 81, 0.8) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__item {
  background-color: rgba(55, 65, 81, 0.8) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__item.active {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

/* 详情对话框样式 */
.customer-dialog .el-dialog {
  background-color: #2d3748;
  border-radius: 8px;
}

.customer-dialog .el-dialog__title {
  color: #e5e7eb;
}

.customer-dialog .el-dialog__header {
  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
}

.customer-dialog .el-dialog__footer {
  border-top: 1px solid rgba(75, 85, 99, 0.5);
  padding: 15px 20px;
}

/* 描述列表样式 */
.el-descriptions {
  color: #e5e7eb;
}

.el-descriptions__label {
  color: #d1d5db !important;
  font-weight: 500;
}

.el-descriptions__cell {
  border-color: rgba(75, 85, 99, 0.3) !important;
}

/* 时间线样式（复用订单页面风格，保持一致性） */
.el-timeline {
  padding: 10px 0;
}

.el-timeline-item__timestamp {
  color: #9ca3af;
}

.el-card {
  background-color: rgba(55, 65, 81, 0.5);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

/* 分割线样式 */
.el-divider {
  background-color: rgba(75, 85, 99, 0.3);
}

.el-divider__text {
  color: #d1d5db;
  background-color: #2d3748;
  padding: 0 10px;
}

/* 固定列样式 */
.el-table__fixed-right {
  background-color: rgba(31, 41, 55, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.el-table__fixed-right::before {
  background-color: transparent;
}

/* 按钮图标样式 */
.el-icon {
  color: currentColor;
}
</style>
